<!-- 全局 -->
<template>
  <div class="global-com">
    <div class="com-charts" ref="globalcom"></div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      chartsInstance: null,
      allData: null,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //   初始化ecahrts配置
    initChart() {
      this.chartsInstance = this.$echarts.init(this.$refs.globalcom);
      const initOption = {
        title: {
          text: "销售量展示",
          textStyle: {
            color: "red",
          },
        },
        // 工具提示
        tooltip: {},
        // 文字说明
        legend: {
          data: ["销量"],
        },
        // x轴
        xAxis: {
          type: "category",
        },
        // y轴--y轴-会根据series进行数据对象渲染
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "销量",
            type: "bar",
          },
        ],
      };
      this.chartsInstance.setOption(initOption);
    },
    async getData() {
      // http://8.136.129.225:9000/api/seller
      let rel = await this.$http.get("http://8.136.129.225:9000/api/seller");
      this.allData = rel.data;
      this.updateChart();
    },
    // 得到数据
    updateChart() {
      let showData = this.allData;
      //   拿到所有的name值
      let datasName = showData.map((item) => {
        return item.name;
      });
      let datasValue = showData.map((item) => {
        return item.value;
      });
      const updataOption = {
        yAxis: {
          data: datasName,
        },
        series: [
          {
            data: datasValue,
          },
        ],
      };
      this.chartsInstance.setOption(updataOption);
    },
    // 自适应
    screenMedia() {
      // console.log(this.$refs.globalcom.offsetWidth);
      let ratio = (this.$refs.globalcom.offsetWidth / 100) * 3;
      let screenOption = {
        title: {
          textStyle: {
            fontSize: ratio,
          },
        },
      };
      this.chartsInstance.setOption(screenOption);
      this.chartsInstance.resize();
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log(this.$echarts);
    // 初始charts实例的方法
    this.initChart();
    this.getData();
    // 给mounted绑定resize事件
    window.addEventListener("resize", this.screenMedia);
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {
    window.removeEventListener("resize", this.screenMedia);
  }, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style>
</style>